<template>
	<view class="goodsPage">
		<view class="goodsImgBox">
			<image class="goodsImg" :src="dataInfo.file" mode="scaleToFill"></image>
		</view>
		<view class="activityInfoContent">
			<view class="activityInfoTitle">{{dataInfo.name}}</view>
			<view class="activityInfoTime">电话：{{dataInfo.phone}}</view>
			<view class="addressText">{{dataInfo.address}}</view>
			<view class="goodsDescribe">
				<mp-html :content="dataInfo.details||dataInfo.remark" />
			</view>
			<!-- <view class="submitBtnBox">
				<view class="submitBtn" @click="modalOpen('modal')">报名</view>
				<view class="numText">
					已报名{{dataInfo.enrollUserNum}}人
				</view>
			</view> -->
			<view class="participateInfoBox">
				<view class="participateInfo">
					<view class="imgBox" v-for="(item,index) in dataInfo.enrollUserList" :key="index">
						<image class="img" :src="item.wxHead" mode="scaleToFill" v-if="item.wxHead"></image>
						<image src="@/static/home/useImg.png" v-else class="imgSize" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" :zoom="false" :showConfirmButton="false">
			<view class="contentBox">
				<view class="titleBox">
					<view class="title">活动报名</view>
					<view class="closeBtn" @click="closeModal">
						<uni-icons type="closeempty" size="48rpx"></uni-icons>
					</view>
				</view>
				<view class="modalContentBox">
					<view class="rowTitle">报名信息</view>
					<view class="rowText">xxxxxxxxxxxxxxxxxxxx</view>
					<view class="modalRow" style="margin-top: 36rpx;">
						<view class="">
							<view class="rowTitle">报名人</view>
							<view class="rowText">{{userInfo.nickName}}</view>
						</view>
						<view class="">
							<view class="rowTitle">联系方式</view>
							<view class="rowText">{{userInfo.phonenumber}}</view>
						</view>
					</view>
					<!-- 					<view class="modalInputRow">
						<view class="label">手机</view>
						<view class="inputBox" :class="[formRuls.phone?'err':'']">
							<input type="text" v-model="formData.phone" class="input"
								placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;"
								placeholder="请输入手机号码" />
						</view>
					</view>
					<view class="modalRowTip">{{formRuls.phone}}</view>
					<view class="modalInputRow">
						<view class="label">微信账号</view>
						<view class="inputBox" :class="[formRuls.wx?'err':'']">
							<input type="text" v-model="formData.wx" class="input"
								placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;"
								placeholder="请输入微信账号" />
						</view>
					</view>
					<view class="modalRowTip">{{formRuls.wx}}</view>
					<view class="modalInputRow">
						<view class="label">身高</view>
						<view class="inputBox" :class="[formRuls.height?'err':'']">
							<input type="text" class="input" v-model="formData.height"
								placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;"
								placeholder="请输入" />
							<view class="inputSuffix">米</view>
						</view>
					</view>
					<view class="modalRowTip">{{formRuls.height}}</view>
					<view class="modalInputRow">
						<view class="label">体重</view>
						<view class="inputBox" :class="[formRuls.weight?'err':'']">
							<input type="text" class="input" v-model="formData.weight"
								placeholder-style="font-weight: 400;font-size: 28rpx;color: #979797;"
								placeholder="请输入" />
							<view class="inputSuffix">公斤</view>
						</view>
					</view>
					<view class="modalRowTip">{{formRuls.weight}}</view>
					<view class="btn" @click="submit">立即报名</view> -->
					<dynamicForms ref="formRef" @submit="addSubmit" btnText="立即报名"></dynamicForms>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import * as coffeeApi from "@/api/coffee.js"
	import * as activityRegistrationApi from "@/api/activityRegistration.js"
	export default {
		data() {
			return {
				show: false,
				dataInfo: {
					activityFile: "",
					activityId: '',
					activityName: "",
					activityType: "0",
					createBy: null,
					createTime: "2024-02-20 16:46:59",
					eliteType: "1",
					endTime: "2024-03-01",
					isPublic: "0",
					remark: "<p>xxxx</p>",
					source: "xxxx",
					startTime: "2024-02-29",
					updateBy: null,
					updateTime: "2024-02-29 11:01:02",
					enrollUserNum: 0,
					address: '',
					enrollUserList: []
				},
				userInfo: {},
				formData: {
					phone: '',
					wx: '',
					height: '',
					weight: ''
				},
				formRuls: {
					phone: '',
					wx: '',
					height: '',
					weight: ''
				}
			};
		},
		onLoad(options) {
			console.log(options);
			this.infoId = options.id
			this.getInfo()
		},
		onShow() {
			this.userInfo = this.$store.getters.my_userInfo
			console.log(this.userInfo);
		},
		methods: {
			addSubmit(formJson) {
				const dataObj = {
					activityId: this.infoId,
					information: JSON.stringify(formJson)
				}
				uni.$u.throttle(activityRegistrationApi.addenroll(dataObj).then(res => {
					this.$toast('报名成功')
					this.closeModal()
				}), 500)
			},
			getInfo() {
				coffeeApi.coffeeId(this.infoId).then(({
					data
				}) => {
					this.dataInfo = data

				})
			},
			checkForm() {
				const formData = this.formData
				let formRuls = this.formRuls
				if (!uni.$u.test.mobile(formData.phone)) {
					formRuls.phone = "请输入正确的手机号码"
					return false
				} else {
					formRuls.phone = ""
				}
				if (uni.$u.test.isEmpty(formData.wx)) {
					formRuls.wx = "请输入微信账号"
					return false
				} else {
					formRuls.wx = ""
				}
				if (uni.$u.test.isEmpty(formData.height)) {
					formRuls.height = "请输入身高"
					return false
				} else {
					formRuls.height = ""
				}
				if (uni.$u.test.isEmpty(formData.weight)) {
					formRuls.weight = "请输入体重"
					return false
				} else {
					formRuls.weight = ""
				}
				return true
			},
			submit() {

				if (!this.checkForm()) {
					return
				}
			},
			closeModal() {
				this.show = false
				let formData = this.formData
				let formRuls = this.formRuls
				for (let key in formData) {
					console.log(key);
					formData[key] = ''
				}
				for (let key in formRuls) {
					formRuls[key] = ''
				}
			},
			modalOpen() {
				const that = this
				that.show = true
				that.$nextTick(() => {
					that.$refs.formRef.initData(this.dataInfo.formJson)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/utils/viewScss/info.scss";

	/deep/ .u-modal__content {
		padding: 30rpx 0 0 0 !important;
	}
</style>